<template>
  <div>
    <el-dialog
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      title="编辑内容类型"
      :visible="open"
      width="1000px"
      append-to-body
      @close="cancel()"
    >
      <div class="tip">注：内容可以拖拽来调整内容</div>
      <el-card class="card">
        <div class="cardtitle flexBet">信息页</div>
        <vuedraggable
          style="min-height: 50px; padding: 15px 15px 0 15px"
          class="flex"
          ghost-class="custom_ghost"
          v-model="contents1"
          group="site"
          animation="300"
        >
          <div
            class="things_item shou"
            v-for="(item, index) in contents1"
            :key="index"
          >
            {{ item.contentName }}
          </div>
        </vuedraggable>
      </el-card>
      <el-card class="card">
        <div class="cardtitle flexBet">工作页</div>
        <vuedraggable
          style="min-height: 50px; padding: 15px 15px 0 15px"
          class="flex"
          ghost-class="custom_ghost"
          v-model="contents2"
          group="site"
          animation="300"
        >
          <div
            class="work_item shou"
            v-for="(item, index) in contents2"
            :key="index"
          >
            {{ item.contentName }}
          </div>
        </vuedraggable>
      </el-card>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">关 闭</el-button>
        <el-button type="primary" @click="confirm">确 认</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { batchEditContentType } from '@/api/course/course'
import vuedraggable from 'vuedraggable'

export default {
  components: { vuedraggable },
  props: {
    open: Boolean,
    arr: {
      default() {
        return []
      }
    }
  },
  data() {
    return {
      contents1: [],
      contents2: []
    }
  },
  watch: {
    async open(e) {
      if (e) {
        this.contents1 = this.arr.filter((obj) => obj.contentType === 1)
        this.contents2 = this.arr.filter((obj) => obj.contentType === 2)
      }
    }
  },
  mounted() {
  },
  methods: {
    cancel() {
      this.$emit('update:open', false)
    },
    async confirm() {
      this.contents1.map((item) => {
        item.contentType = 1
      })
      this.contents2.map((item) => {
        item.contentType = 2
      })
      let arr = {
        infoList: this.contents1,
        workList: this.contents2
      }
      await batchEditContentType(arr)
      this.$modal.msgSuccess('修改成功')
      this.$emit('update:open', false)
      this.$emit('refresh', true)
    }
  }
}
</script>
<style scoped lang="scss">
.card {
  margin-top: 20px;
  border-radius: 10px;

  .cardtitle {
    border-bottom: 1px solid rgba(204, 204, 204, 1);
    height: 38px;
    line-height: 38px;
    padding: 0 15px;

    div {
      font-size: 14px;
      font-weight: 400;
      color: rgba(48, 49, 51, 1);
    }

    img {
      width: 10px;
      height: 10px;
      margin: auto 0;
    }
  }

  .things_item {
    border-radius: 8px;
    background: #E4EDFE;
    border: 1px solid #CCDEFF;
    font-family: PingFangSC, PingFang SC, sans-serif;
    font-weight: 400;
    font-size: 14px;
    color: #4E8DFF;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px 10px;
    box-sizing: border-box;
    user-select: none;
    margin: 0 20px 20px 0;
  }

  .work_item {
    border-radius: 8px;
    background: #E4FFF7;
    border: 1px solid #AEF3DF;
    font-family: PingFangSC, PingFang SC, sans-serif;
    font-weight: 400;
    font-size: 14px;
    color: #28B28B;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px 10px;
    box-sizing: border-box;
    user-select: none;
    margin: 0 20px 20px 0;
  }
}

.addtask {
  margin-top: 20px;
  height: 38px;
  background: rgba(39, 196, 120, 1);
  border-radius: 19px;

  img {
    width: 10px;
    height: 10px;
    margin: auto;
  }
}

::v-deep .el-card__body {
  padding: 0;
}

.custom_ghost {
  background-color: transparent; /* 设置被拖拽元素的背景色为红色 */
}
</style>
